<template>
  <div class="page-container">
    <div class="search">
      <div class="formBox">
        <el-form class="formClass" :label-width="$globalCss.formLabelWidth_default" label-position="top"
          ref="formSearch" :rules="rules" :model="formData" onsubmit="return false" label-width="150px">
          <el-form-item :label="$t('label_operate_network')" prop="placeId">
            <ex_super_input v-model="formData.placeId" class="w_fill" type='select'
              url="/tms-api/base/TmsServiceOutletRpc/selectLikeServiceOutletLabel.json"
              :option="{ label: 'placeName', value: 'id' }" @initList="networkDefault" @change="placeChange" />
          </el-form-item>
          <el-form-item :label="$t('label_bag_box')" prop="packageNo">
            <div class="flex_row_center">
              <el-input v-model.trim="formData.packageNo" class="form_input_default" ref="codeInput"
                v-on:keyup.native="scanCodeKeyInput" @blur="blurCodeInput" style="flex: 1;" />
              <div>
                <el-button class="mg_l2" type="primary" @click="generatePackageNumber">
                  <i class="iconfont icon-Number"></i>
                  {{ $tt('label_bag_box_create') }}
                </el-button>
                <el-checkbox class="mg_h2" :value="autoPrint" border @change="changeAutoPrint">
                  {{ $tt('label_auto_print') }}
                </el-checkbox>

              </div>
            </div>
          </el-form-item>
          <el-form-item :label="$tt('label_waybill_face_box')" prop="trackNumber">
            <div class="flex_row_center">
              <el-input v-model.trim="formData.trackNumber" clearable class="form_input_default" ref="codeInput"
                v-on:keyup.native="scanCodeKeyInput" @blur="blurCodeInput" style="flex: 1;" />
              <div>
                <el-button class="mg_l2" type="primary" @click="validtrackNumber"><i class="iconfont icon-scan" /> {{
          $tt('label_scan') }}</el-button>
                <el-checkbox class="mg_h2" @change="autoFocusSetChange" v-model="autoFocusSet" border>{{
          $tt('label_auto_focus') }}</el-checkbox>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="statistics">
        <div class="count">
          {{ formTable.tableData.length }}
        </div>
        <div class="title">{{ $t('label_scan_count') }}</div>
      </div>
    </div>

    <div class="layout-bottom">
      <div class="btns">
        <el-button type="primary" @click="onSubmit('/tms-api/waybill/TmsExpressOperationRpc/express_package.json')">{{
          $t('label_submit') }}</el-button>
        <!-- <button_select_file @input="importExcel" type="primary">
        {{ $tt('label_import') }}
        <i class="el-icon-download el-icon--right"></i>
      </button_select_file> -->
        <el-button @click="downloadXlsx('label_beBox_bePicking')">{{ $t('label_export') }}</el-button>
        <el-button @click="deleteFn">{{ $t('label_delete') }}</el-button>
      </div>
      <ex_super_table ref="MainTable" class="main-table" v-bind="tableOption" :data="formTable.tableData"
        :autoFlex="true" :autoPage="false" @selection-change="list => selection = list">
      </ex_super_table>
    </div>
    <common_print_dialog ref="common_print_dialog" businessType="EXPRESS_PACKAGE"
      printClientUrl='/print-api/template/PrintTemplateCfgRpc/getOnlineClientInServerOutlet.json'
      :printClientParam="{ serverOutletId: formData.placeId}" />

  </div>
</template>
<script>
import expressOperate from '@/mixin/tms-express-operate.js'
import common_print_dialog from '@/component/print/common_print_dialog'


export default {
  title: "label_beBox_bePicking",
  mixins: [expressOperate],
  components: { common_print_dialog },
  data() {
    return {

      formData: {
        actionCode: 'EXPRESS_PACKAGE'
      },
      // 扫码查询接口地址
      scanPackageNoUrl: "/tms-api/waybill/TmsExpressQueryRpc/scan_start_next.json",
      tableOption: {
        model: [
          { type: 'selection', clickToggle: true, keyGroup: 'label_table_operate' },
          { key: 'packageNo', label: 'label_bag_box', 'min-width': 120, 'show-overflow-tooltip': true },
          { key: 'transportNumber', label: 'label_waybill_code', 'min-width': 160, 'show-overflow-tooltip': true, },
          { key: 'currentUsername', label: 'label_operator_user', 'min-width': 120, 'show-overflow-tooltip': true, },
          { key: 'scanTime', label: 'label_scan_time', 'min-width': 120, 'show-overflow-tooltip': true, formatter: (r, c, v) => this.$dateFormat(v) },
          // { key: 'totalQuantity', label: 'label_tms_track_pkgs', 'min-width': 120, 'show-overflow-tooltip': true },
          { key: 'totalWeight', label: 'label_weight', 'min-width': 120, 'show-overflow-tooltip': true },
          { key: 'remark', label: 'label_remark', 'min-width': 120, 'show-overflow-tooltip': true },
        ],

      }

    };
  },
  mounted() {

    let localConfig = window.localStorage.getItem('operate>packing>config')
    if (localConfig) {
      try {
        localConfig = JSON.parse(localConfig)
        this.autoPrint = !!localConfig.autoPrint
      } catch (e) {
      }
    }

    if (this.autoPrint) {
      const printConfig = this.$refs.print_config_dialog.loadPrintConfig({ typeKey: "EXPRESS_PACKAGE" })
      if (!printConfig || !printConfig.clientId) {
        this.autoPrint = false
      }
    }
    //////////////

  },
  methods: {
    placeChange() {
      this.autoPrint = false
    },
    // 生成袋号/箱号
    generatePackageNumber() {
      this.$ajax({
        url: "/tms-api/waybill/TmsExpressOperationRpc/gen_package_no.json",
        method: 'post',
        success: (res) => {
          if (res && res.data) {
            this.formData.packageNo = res.data
            if (this.autoPrint) {
              this.autoPrintFn()
            }
          } else {
            this.$message.error(this.$t('tip_not_found_data'))
          }
        }
      })
    },
    configChange() {
      const data = {
        autoPrint: this.autoPrint,
      }
      window.localStorage.setItem('operate>packing>config', JSON.stringify(data))
    },
    changeAutoPrint(e) {
      if (!this.autoPrint) {
        const printConfig = _.head(this.$refs.print_config_dialog.loadPrintConfig({ typeKey: "EXPRESS_PACKAGE" }))
        if (!printConfig || !printConfig.clientId || !printConfig.templateId) {
          this.autoPrint = false
          this.$refs.print_config_dialog.show()
        } else {
          this.autoPrint = true
        }
      } else {
        this.autoPrint = true
      }
      this.configChange()
    },
    sureAutoPrint(e) {
      this.autoPrint = true
      this.configChange()
    },
    autoPrintFn() {
      if (!_.isEmpty(this.formData)) {
        this.$refs.common_print_dialog.printDefaultOption({
          list: this.formData,
          url: "/tms-api/waybill/TmsExpressPrintRpc/printPackageNo.json",
          handler: (data, list) => {
            data.packageNo = this.formData.packageNo
            data.placeId = this.formData.placeId
            data.clientId = `${this.formData.placeId}_${data.clientId}`
            return data
          },
          templateRequire: true
        })
      }
    }

  }

};

</script>
<style lang="less" scoped>
.page-container {
  background-color: #F7F8FA;
  box-shadow: none;
  padding: 0;
}

.search {
  display: flex;
  justify-content: space-between;

  .formBox {
    background-color: #fff;
    flex: 1;
    border-radius: 4px;
    padding-top: 12px;

    .formClass {
      width: 800px;
      margin-left: 20px;
    }
  }


  .statistics {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    margin-left: 8px;
    border-radius: 4px;
    width: 30%;

    .count {
      font-size: 80px;
      color: #F56C6C;
    }
  }
}


.btns {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 10px;
}

.layout-bottom {
  margin-top: 8px;
  flex: 1;
  background-color: #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  padding: 12px;
}
</style>
